

//  留言板  动态的 数据  

import {ajax} from "~/request"



// react 实现简单的留言板 
// 父组件  留言板
// 子组件  提交留言   留言列表 
// 
import {MyBtn} from "./MyBtn"
export default class TodoListThree extends Component{
  componentDidMount(){
    ajax.get("http://localhost:4400/api/comment-list")
    .then(res=>{
      console.log(res)
       this.setState({
         comments:res.data.result
       })
    })
  }

  state = {
    comments:[
    ]
  }

  addComment=(comments)=>{
      this.setState({
        comments
      })
  }
  setCommeontOne=(l,i)=>{
    this.state.comments.splice(i,1,l)
    this.setState({
      comments:this.state.comments 
    })
  }
  delCommeontOne=(l,i)=>{
    this.state.comments.splice(i,1)
    this.setState({
      comments:this.state.comments
    })
  }
  render(){
    const {comments} = this.state
    return (
      <div>
        <h2>
          react 实现简单的留言板  -  3    - TodoListThree
        </h2>
        <ShowLiuYanCom
          comments={comments}
          delCommeontOne={this.delCommeontOne}
          setCommeontOne={this.setCommeontOne}
        ></ShowLiuYanCom>
        <PostLiuyanCom
          addComment={this.addComment}
        >

        </PostLiuyanCom>
      </div>
    )
  }
}

class ShowLiuYanCom extends Component{
  setCommeontOne=(l,i)=>{
    var content = window.prompt(l.title,l.content);
    if(content&&content!=l.content){
      ajax.post("http://localhost:4400/api/comment-update",{
        _id:l._id,
        content:content 
      })
      .then(res=>{
        if(res.data.code==200){
          l.content = content;
          this.props.setCommeontOne(l,i);
          this['item'+i].className = "bounce "
          setTimeout(()=>{
            if(this['item'+i]){this['item'+i].className = " "}
          },1000)
        }
      })

    }
  }
  delCommeontOne=(l,i)=>{
    ajax.post("http://localhost:4400/api/comment-delete",{
      _id:l._id
    })
    .then(res=>{
      if(res.data.code==200){
        this['item'+i].className = "zoomOut";
        setTimeout(()=>{
          this.props.delCommeontOne(l,i)
          if(this['item'+i]){
            this['item'+i].className = " "
          }
        },1000)
      }
    })
    
  }
   render(){
     const {comments} = this.props;
     return (
      <div>
        <h4 style={{textAlign:"center"}}>展示留言 </h4>
        <div className="list">
          {
              comments.map((l,i)=>(
                <div ref={el=>this['item'+i]=el}  className="item zoomIn" style={{ marginTop:15,border:'1px solid #eee',borderRadius:8,background:'pink',width:'92%'}} key={i}>
                    <p>序号: {i+1}</p>
                    <div className="col">
                    <p>标题: {l.title}</p>
                    </div>
                    <p>
                      内容: {l.content}
                    </p>
                    <div className="actions">
                    <button onClick={()=>this.delCommeontOne(l,i)}>删除</button>
                    <button onClick={()=>this.setCommeontOne(l,i)}>修改</button>
                    </div>
                </div>
              ))
          }
        </div>
      </div>
     )
   }
}

class PostLiuyanCom extends Component{
  addComment=()=>{
    if(this.title.value && this.content.value){
      ajax.post("http://localhost:4400/api/comment-add",{
        title:this.title.value,
        content: this.content.value
      }).then(res=>{
        //  请求数据 
        ajax.get("http://localhost:4400/api/comment-list")
        .then(res=>{
          console.log(res)
          this.props.addComment(res.data.result)
          this.title.value = ""
          this.content.value = ""
        })
      })
    }else{
      alert("数据不能为空")
    }
   
    

  }
    render(){
      return (
        <div>
          <h4 style={{textAlign:"center"}}>添加留言 </h4>
          <p>
            <input type="text" placeholder="请输入标题" ref={el=>this.title=el}/>
          </p>
          <p>
            <input type="text" placeholder="请输入内容" ref={el=>this.content=el}/>
          </p>
          <MyBtn text={'提交留言'}  onClick={this.addComment} />
        </div>
      )
    }
}
// a=>(a)
// a=>{ return  a }